<template>
    <div>
        <div>
        <van-nav-bar title="收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    </div>
    <nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
    <nut-address
      v-model:visible="showPopupOther"
      type="exist"
      :exist-address="existAddress"
      :province="address.province"
      :city="address.city"
      :country="address.country"
      :town="address.town"
      @close="close"
      @selected="selected"
      custom-and-exist-title="选择其他地址"
      @switch-module="switchModule"
      @close-mask="closeMask"
      @change="onChange"
    ></nut-address>
  </template>
  <script setup>
  // 返回上一页面
const onClickLeft = () => history.back();
  import { ref, reactive } from 'vue';
  const showPopupOther = ref(false);
  const address = reactive({
    province: [
      { id: 1, name: '北京' },
      { id: 2, name: '广西' },
      { id: 3, name: '江西' },
      { id: 4, name: '四川' }
    ],
    city: [
      { id: 7, name: '朝阳区' },
      { id: 8, name: '崇文区' },
      { id: 9, name: '昌平区' },
      { id: 6, name: '石景山区' }
    ],
    country: [
      { id: 3, name: '八里庄街道' },
      { id: 9, name: '北苑' },
      { id: 4, name: '常营乡' }
    ],
    town: []
  });
  const existAddress = ref([
    {
      id: 1,
      addressDetail: '',
      cityName: '次渠镇',
      countyName: '通州区',
      provinceName: '北京市',
      selectedAddress: true,
      townName: '',
      name: '探探鱼',
      phone: '182****1718'
    },
    {
      id: 2,
      addressDetail: '',
      cityName: '钓鱼岛全区',
      countyName: '',
      provinceName: '钓鱼岛',
      selectedAddress: false,
      townName: '',
      name: '探探鱼',
      phone: '182****1718'
    },
    {
      id: 3,
      addressDetail: '京东大厦',
      cityName: '大兴区',
      countyName: '科创十一街18号院',
      provinceName: '北京市',
      selectedAddress: false,
      townName: '',
      name: '探探鱼',
      phone: '182****1718'
    }
  ]);
  const backBtnIcon = ref('left');
  const text = ref('选择地址');
  
  const showAddressOther = () => {
    showPopupOther.value = true;
  };
  
  const close = (val) => {
    if (val.type == 'exist') {
      const { provinceName, cityName, countyName, townName, addressDetail } = val.data;
      text.value = provinceName + cityName + countyName + townName + addressDetail;
    } else {
      text.value = val.data.addressStr;
    }
  };
  
  const selected = (prevExistAdd, nowExistAdd, arr) => {
    console.log(prevExistAdd);
    console.log(nowExistAdd);
  };
  
  const switchModule = (cal) => {
    if (cal.type == 'custom') {
      console.log('点击了“选择其他地址”按钮');
    } else {
      console.log('点击了自定义地址左上角的返回按钮');
    }
  };
  const onChange = (cal) => {
    const name = address[cal.next];
    if (!name || name.length < 1) {
      showPopupOther.value = false;
    }
  };
  
  const closeMask = (val) => {
    console.log('关闭弹层', val);
  };
  </script>
  